<template>
  <view class="container">
    <view class="header">
      <text class="title">统一扫码输入组件示例</text>
    </view>

    <!-- 使用统一扫码输入组件 -->
    <view class="scan-section">
      <ScanInput
        v-model="searchCode"
        placeholder="请输入单据号或扫码"
        tip-text="达到5笔数据自动提交"
        :loading="isLoading"
        :on-scan-result="handleCustomScanResult"
        :on-confirm="handleSearch"
        ref="scanInputRef"
      />
    </view>

    <!-- 查询结果展示 -->
    <view v-if="records.length > 0" class="result-section">
      <view class="result-header">
        <text class="result-title">查询结果 ({{ records.length }}条)</text>
      </view>
      
      <view class="result-list">
        <view 
          v-for="(item, index) in records" 
          :key="index"
          class="result-item"
        >
          <text class="item-text">{{ item.name }} - {{ item.code }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="btn-reset" @click="handleReset">重置</button>
      <button class="btn-submit" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import ScanInput from '@/components/ScanInput/ScanInput.vue'

export default {
  name: 'ScanInputExample',
  components: {
    ScanInput
  },
  data() {
    return {
      searchCode: '',
      isLoading: false,
      records: []
    }
  },
  methods: {
    /**
     * 处理搜索确认
     */
    async handleSearch(searchValue) {
      if (!searchValue.trim()) {
        uni.showToast({
          title: '请输入查询内容',
          icon: 'none'
        })
        return
      }

      this.isLoading = true
      
      try {
        // 模拟API调用
        // const res = await YourApi.searchRecords({ code: searchValue })
        
        // 模拟数据
        setTimeout(() => {
          this.records = [
            { name: '测试数据1', code: searchValue + '_001' },
            { name: '测试数据2', code: searchValue + '_002' },
            { name: '测试数据3', code: searchValue + '_003' }
          ]
          
          uni.showToast({
            title: '查询成功',
            icon: 'success'
          })
        }, 1000)
        
      } catch (error) {
        console.error('查询失败:', error)
        uni.showToast({
          title: '查询失败',
          icon: 'error'
        })
      } finally {
        this.isLoading = false
      }
    },

    /**
     * 自定义扫码结果处理
     * 返回false可以阻止默认的搜索行为
     */
    handleCustomScanResult(barcode) {
      console.log('自定义扫码结果处理:', barcode)
      
      // 这里可以添加扫码结果的预处理逻辑
      // 比如格式验证、数据转换等
      
      // 返回true继续执行默认搜索，返回false阻止默认搜索
      return true
    },

    /**
     * 重置功能
     */
    handleReset() {
      this.searchCode = ''
      this.records = []
      
      // 调用组件方法清空输入框
      if (this.$refs.scanInputRef) {
        this.$refs.scanInputRef.clearInput()
      }
      
      uni.showToast({
        title: '已重置',
        icon: 'success'
      })
    },

    /**
     * 提交功能
     */
    handleSubmit() {
      if (this.records.length === 0) {
        uni.showToast({
          title: '请先查询数据',
          icon: 'none'
        })
        return
      }

      uni.showModal({
        title: '确认提交',
        content: `确定要提交 ${this.records.length} 条记录吗？`,
        success: (res) => {
          if (res.confirm) {
            // 执行提交逻辑
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            })
            
            // 提交成功后重置
            this.handleReset()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 12rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.scan-section {
  background-color: white;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.result-section {
  background-color: white;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.result-header {
  margin-bottom: 20rpx;
}

.result-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.result-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.result-item {
  padding: 16rpx;
  border-bottom: 1rpx solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-text {
  font-size: 28rpx;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 12rpx;
}

.btn-reset {
  flex: 1;
  height: 80rpx;
  background-color: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  
  &:active {
    background-color: #e0e0e0;
  }
}

.btn-submit {
  flex: 1;
  height: 80rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  
  &:active {
    background-color: #0056b3;
  }
}
</style>